<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>计时租赁</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
		<!--<link rel="stylesheet" type="text/css" href="../../css/lCalendar.css" />       &lt;!&ndash;选择日期的插件的css文件&ndash;&gt;-->

		<link href="__PUBLIC__/css/mobiscroll_002.css" rel="stylesheet" type="text/css">    <!--日期css-->
		<link href="__PUBLIC__/css/mobiscroll.css" rel="stylesheet" type="text/css">			<!--日期css-->
		<link href="__PUBLIC__/css/mobiscroll_003.css" rel="stylesheet" type="text/css">
		<link href="__PUBLIC__/css/mui.indexedlist.css" rel="stylesheet" />  <!--日期css-->
		<style>
			.mui-indexed-list{height:520px}
			.mui-table-view{height: auto;}
			.mui-indexed-list-inner{height: 620px;overflow: auto}
			.zhezhao{position: absolute;top:0;bottom: 0;left: 0;right: 0;background: #333333;opacity: 0.5;display: none;z-index: 10;}
			.popup{width: 90%;height: 32rem;border-radius:0.5rem;position:absolute;top:3rem;left:5%;display: none;z-index: 20}
		</style>
		<script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IAwxRMWcGZiNzohAyxcImHbZEGM4SXsH"></script>
		<!--<script src="../../js/LCalendar.min.js"></script>       &lt;!&ndash;选择日期的插件&ndash;&gt;-->
		<!--<script src="../../js/lCalendar.js"></script>       &lt;!&ndash;选择日期的插件&ndash;&gt;-->
		<!--<script src="__PUBLIC__/layer_mobile/layer.js"></script>-->
		<script src="__PUBLIC__/js/layer/layer.js"></script>
		<script src="__PUBLIC__/js/mobiscroll_002.js" type="text/javascript"></script>
		<script src="__PUBLIC__/js/mobiscroll_004.js" type="text/javascript"></script>

		<script src="__PUBLIC__/js/mobiscroll.js" type="text/javascript"></script>
		<script src="__PUBLIC__/js/mobiscroll_003.js" type="text/javascript"></script>
		<script src="__PUBLIC__/js/mobiscroll_005.js" type="text/javascript"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a  style="position:absolute;z-index: 2" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a href="{:U('index/index')}" style='position:absolute; z-index:3; width:40px; height:40px; left:0px; top:0px;background: blue;opacity:0'></a>
			<h1 class="mui-title">计时租赁</h1>
		</header>
		<include file="Public/fotter1" />
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<form class="mui-input-group">
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-cktype-icon  mui-pull-left"></i>
					<label class="pl40">选择仓库类型</label>
					<select id="type" class="mui-btn mui-btn-block w45 mt5 warehouseType">
						<option value="0">选择仓库类型</option>
						<foreach name="type" item="vo">
							<option times="{$vo.times}" value="{$vo.id}">{$vo.name}</option>
						</foreach>
					</select>
					<a class="mui-navigate-right"></a>	
				</div>
				<div style="display: none" id="ri" class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-zq-icon  mui-pull-left"></i>
					<label class="pl40">选择起租日期</label>
					<input _class="rier" style="width: 40%;text-align: right"  onfocus="this.blur();" type="text" name="appDate" id="appDate" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
				</div>
				<div style="display: none"  id="shi" class="mui-input-row h50">
						<i class="mui-yuyue-icon mui-zq-icon  mui-pull-left"></i>
						<label class="pl40">选择起租日期</label>
						<input _class="shier" style="width: 50%;text-align: right"  onfocus="this.blur();" type="text"  name="appDateTime" id="appDateTime" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="选择起租日期">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-zq-icon  mui-pull-left"></i>
					<label class="pl40">租期</label>
					<input id="zuqi" style="width: 40%;text-align:right " type="text" pattern="[0-9]*"  maxlength="6" class="leaseTerm mt5 mui-input mui-yuuye" placeholder="请输入租期">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-yuyue-icon mui-mianji-icon  mui-pull-left"></i>
					<label class="pl40" style="line-height: 15px!important;padding-right: 0">物品长宽<br/>(mm)</label>
					<input id="kuan" type="text" pattern="[0-9]*" maxlength="6" style="width: 30%;float: right;padding-right: 0;padding-left: 0;text-align: center" class="houseWidth mt5 mui-input-clear mui-input mui-yuuye" placeholder="输入租用宽">
					<span style="float: right;line-height:50px;color: #999999">—</span>
					<input id="chang" type="text" pattern="[0-9]*" maxlength="6" style="width: 30%;float: right;padding-right: 0;padding-left: 0;text-align: center;" class="houseLength mt5 mui-input-clear mui-input mui-yuuye" placeholder="输入租用长">


				</div>
				<div class="mui-input-row h50">
					<i class="mui-jszl-icon mui-jgfw-icon  mui-pull-left"></i>
					<label class="pl40" style="padding-right: 0">价格范围</label>
					<input id="jia2" type="text" pattern="[0-9]*" maxlength="10" style="width: 28%;float: right;padding-right: 0;padding-left: 0;text-align: center" class="heightPrice mt5 mui-input-clear mui-input mui-yuuye" placeholder="最高价格">
					<span style="float: right;line-height:50px;color: #999999">—</span>
					<input id="jia1" type="text" pattern="[0-9]*" maxlength="10" style="width: 28%;float: right;margin-left: 10px;padding-right: 0;padding-left: 0;text-align: center" class="lowPrice mt5 mui-input-clear mui-input mui-yuuye" placeholder="最低价格">


				</div>
				<div class="mui-input-row h50">
					<i class="mui-jszl-icon mui-sjjl-icon  mui-pull-left"></i>
					<label class="pl40">距离范围(km)</label>
					<input id="sj" type="text" value="1" pattern="[0-9]*" style="width: 50%;text-align: right" maxlength="6"  class="actualDistance mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入实际距离">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-jszl-icon mui-guanjianzi-icon  mui-pull-left"></i>
					<label class="pl40">关键字</label>
					<input id='Keyword' type="text" style="width: 50%;text-align: center" class="mt5 mui-input-clear mui-input mui-yuuye" placeholder="请输入关键字">
				</div>
				<div class="mui-input-row h50">
					<i class="mui-jszl-icon mui-city-icon  mui-pull-left"></i>
					<label class="pl40">选择城市</label>
					<input id="city" value="{$Current_City}"  type="text" style="margin-right: 20px;width: 50%;text-align: right" onfocus="this.blur();" class="city mt5  mui-input mui-yuuye" placeholder="选择城市"/>
					<a class="mui-navigate-right"></a>	
				</div>
				
			</form>
				<button type="button" class="mb20 mui-btn-sz submitBtn">查询</button>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第2个子页面，该页面展示一个消息列表</div>
				
				
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第3个子页面，该页面展示一个通讯录示例.</div>
			</div>
			<input type="hidden" id="LocLng" value=""/>
			<input type="hidden" id="LocLat" value=""/>
		</div>
						<script>
                            $('#text1').keyup(function (e) {
                                lastTime = e.timeStamp;
                                setTimeout(function () {
                                    if (lastTime - e.timeStamp == 0) {
                                        //获取查询内容
										var val =  $('#text1').val()
										if(val == ''){
                                            $('#searchs2').show()
                                            $('#searchs1').hide()
                                            return false
										}

										$.post("{:U('get_city_list')}",{val:val},function (rels) {
										    str = ''
											if(rels.html.total > 0)
											{
                                                $.each(rels.html.rows, function(key, val) {
                                                    str+='\t\t\t\t\t\t\t\t<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">'+val.name+'</li>\n';
                                                })
                                                $('#searchs1').html(str)
											    $('#searchs2').hide()
												$('#searchs1').show()
											}
											else if(rels.html.total == 0)
											{
                                                $('#searchs2').hide()
                                                $('#searchs1').html('')
											}
                                        })
                                    }
                                }, 1000);
                            });
						</script>

			</div>
		</div>
		<!--<iframe class="ifm" src="{:U('choseCity')}" width="500" height="500" style="display:none;position: absolute;top:0;bottom: 0; left: 0;right: 0;width: 100%;height: 100%;z-index: 10000000000;border: none"></iframe>-->
	</body>
<script src="__PUBLIC__/js/mui.min.js"></script>
<script>
	$(function () {
	    $("input").change(function(){
	        $(".mui-icon-clear").hide()
		});
        $(".city").click(function(){
            // $(".ifm").show();
           // location.href = "{:U('choseCity')}"   layer.closeAll('iframe');
            layer.open({
                type: 2,
                title: false,
                shadeClose: true,
                 closeBtn: 0,
                shade: 0.8,
                area: ['100%', '100%'],
                content: "{:U('choseCity')}" //iframe的url
            });
        });
		//百度地图定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                //alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                //经度
                LocLng = r.point.lng;
                //纬度
                LocLat = r.point.lat;
                $('#LocLng').val(LocLng)
                $('#LocLat').val(LocLat)
                var geoc = new BMap.Geocoder();
                var point = new BMap.Point(LocLng, LocLat);
                geoc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    //$("#getAddress").val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                	//alert(addComp.province)
					$('#dangqianchengshi').html(addComp.city)
                });
                //如果没有经纬度直接停止查询
                if(LocLng == '' || LocLat == '')
                {
                    alert('百度地图地位失败！')
                    return false;
                }
            }
            else {
                alert('百度地图地位失败！' + this.getStatus());
            }
        }, { enableHighAccuracy: true })
    })
    var currYear = (new Date()).getFullYear();
    var opt={};
    opt.date = {preset : 'date'};
    opt.datetime = {preset : 'datetime'};
    opt.time = {preset : 'time'};
    opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        startYear: currYear - 10, //开始年份
        endYear: currYear + 10 //结束年份
    };

    $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
    var optDateTime = $.extend(opt['datetime'], opt['default']);
    var optTime = $.extend(opt['time'], opt['default']);
    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
//    var calendar = new LCalendar();   //点击选择起租日期弹出日期插件选择日期
//    calendar.init({
//        'trigger': '#date', //标签id
//        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
////        'minDate': '1900-1-1', //最小日期
////        'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
//    });
    var reg = new RegExp("^[0-9]*$");
    $(".leaseTerm").blur(function () {      //验证输入的租期只能是整数数字
        if(!reg.test($(".leaseTerm").val())){
            //信息框
            layer.msg('租期只能输入整数数字')
            $(".leaseTerm").val("");
            $(".leaseTerm").focus();
        };
    });
    $(".houseLength").blur(function () {      //验证输入的面积租用长度只能是整数数字
        if(!reg.test($(".houseLength").val())){

            //信息框

            layer.msg('面积租用长度只能是整数数字')
            $(".houseLength").val("");
            $(".houseLength").focus();
        };
    });
    $(".houseWidth").blur(function () {      //验证输入的面积租用宽度只能是整数数字
        if(!reg.test($(".houseWidth").val())){
            //信息框

            layer.msg('面积租用度只能是整数数字')

            $(".houseWidth").val("");
            $(".houseWidth").focus();
        };
    });
    $(".lowPrice").blur(function () {      //验证输入的最低价格范围只能是整数数字
        if(!reg.test($(".lowPrice").val())){
            //layer.msg('最低价格范围只能是整数数字！');
            //信息框
            layer.msg('最低价格范围只能是整数数字')
            $(".lowPrice").val("");
            $(".lowPrice").focus();
        };
    });
    $(".heightPrice").blur(function () {      //验证输入最高价格范围只能是整数数字
        if(!reg.test($(".heightPrice").val())){
            //layer.msg('最高价格范围只能是整数数字！');
            layer.msg('最高价格范围只能是整数数字')
            $(".heightPrice").val("");
            $(".heightPrice").focus();
        };
    });
    $(".actualDistance").blur(function () {      //验证实际距离只能是整数数字
        if(!reg.test($(".actualDistance").val())){
            //layer.msg('实际距离只能是整数数字！');

            layer.msg('实际距离只能是整数数字')
            $(".actualDistance").val("");
            $(".actualDistance").focus();
        };
    });
    $(".submitBtn").click(function(){    //点击查询按钮的时候验证表单
        checkLease()
	});
    function checkLease() {    				//验证表单封装函数
		if($(".warehouseType").val() == 0){
            //layer.msg('请选择仓库类型！');

            layer.msg('请选择仓库类型')

            $(".warehouseType").focus();
            return
		};

        var options=$('#type option:selected');
        var times = options.attr('times')
        if(times == 'Day')
        {
            if($("input[_class='rier']").val() == '')
			{
                layer.msg('请选择起租日期')
                $("input[_class='rier']").focus();
				return false
			}
        }
        else
        {
            //起租日期 shier
            if($("input[_class='shier']").val() == '')
			{
                layer.msg('请选择起租日期')
                $("input[_class='shier']").focus();
				return false
			}
        }


        if($(".leaseTerm").val() == "" ){
            //layer.msg('请输入租期！');

            layer.msg('请输入租期')

            $(".leaseTerm").focus();
            return
        };
        if($(".houseLength").val() == "" ){
            //layer.msg('请输入租用长度！');

            layer.msg('请输入租用长度和宽度')

            $(".houseLength").focus();
            return
        };
        if($(".houseWidth").val() == "" ){
            //layer.msg('请输入租用宽度！');

            layer.msg('请输入租用宽度')

            $(".houseLength").focus();
            $(".houseWidth").focus();
            return
        };
        if($(".lowPrice").val() != "" || $(".heightPrice").val() != "" ){   //最低价格不是空的时候判断输入格式
			if(parseInt($(".heightPrice").val()) <= parseInt($(".lowPrice").val()) ){

                layer.msg('最高价格应该大于最低价格')

                $(".heightPrice").val("");
                $(".heightPrice").focus();
                return
			}
		};
        if($(".city").val() == "" ){
            layer.msg('请选择城市！');

            return false
        };
		//仓库类型
		var WHType=$(".warehouseType").val()
        var options=$('#type option:selected');
        var times = options.attr('times')
		if(times == 'Day')
		{
            //起租日期rier
			var StartDate =  $("input[_class='rier']").val()+' 00:00'
		}
		else
		{
		    //起租日期 shier
            var StartDate =  $("input[_class='shier']").val()
		}
		//租期（必填）
		var Times = $('#zuqi').val();
		//租用面积的长
		var Length = $('#chang').val();
		//租用面积的宽、
		var Width = $('#kuan').val();
		//价格1
		var Price1 = $('#jia1').val()
		//价格2
        var Price2 = $('#jia2').val()
		//与当前位置的距离
		var Distance = $('#sj').val()
		//关键字
		var Keyword = $('#Keyword').val()
		var sort = 'D'
		var city = '北京市';
        var PageIndex = 0;
        //获取经纬度
		var LocLng = $('#LocLng').val()
        var LocLat = $('#LocLat').val()
        LocLng = '116.44477408205'
        LocLat = '40.056226333401'
		if(LocLng=='' || LocLat=='')
		{
		    alert('无法获得经纬度')
			return false
		}
		//116.44477408205
		//40.056226333401
        var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        location.href='/index.php?g=YunCangChu&m=Time&a=search&PageIndex='+PageIndex+"&WHType="+WHType+"&StartDate="+StartDate+'&Times='+Times+"&Length="+Length+"&Width="+Width+"&Price1="+Price1+"&Price2="+Price2+'&Distance='+Distance+'&Keyword='+Keyword+'&City='+city+'&LocLng='+LocLng+'&LocLat='+LocLat+'&Sort='+sort
    }
</script>
	<script>
        $('#type').change(function()
		{
		    if($(this).val() == 0)
			{
                $('#ri').hide()
                $('#shi').hide()
			    return
			}
            var options=$('#type option:selected');
            var times = options.attr('times')
			if(times == 'Day')
			{
			    $('#ri').show()
				$('#shi').hide()
				//$('#zuqi').attr('placeholder','请输入租期(Day)')
			}
			else
			{
                $('#ri').hide()
                $('#shi').show()
                //$('#zuqi').attr('placeholder','请输入租期(Hour)')
			}
		})
	</script>
</html>

